<template>
  <div>
    <div class="al-box-shadow-radius al-p-10px al-m-top-10px gradient-bg al-width-100">

      <div class="al-flex-justify-space-around">
        <div class="al-box-container">
          <div>
            <span class="el-icon-location-outline al-text-color-light-blue"></span>
            {{weatherInfo.city}}
          </div>
          <div>
            {{weatherInfo.date}}
          </div>
          <div>
            {{weatherInfo.week}}
          </div>
        </div>


        <div class="al-box-container  al-width-60">
          <div class="">
            <ALImage class=""
                     :src="imgBaseUrl + weatherInfo.img + '.png'" />
          </div>

          <div>
            当前天气：{{weatherInfo.weather}}
          </div>

          <div class="">
            当前温度：{{weatherInfo.temp}}℃
          </div>

          <div>
            今日气温：{{weatherInfo.templow}} ~ {{weatherInfo.temphigh}} ℃
          </div>
        </div>
      </div>

      <div class="al-text-right" style="font-size: 12px">
        更新时间：{{weatherInfo.updatetime}}
      </div>




    </div>
  </div>
</template>

<script>
  import {request} from "../../../util/network/request";
  import ALImage from "../../../components/public/ALImage";

  export default {
    name: "WeatherComponent",
    //组件
    components: {ALImage},
    //属性
    props: {
      city:{
        type: String,
        default: '北京'
      }
    },

    //数据
    data() {
      return {
        weatherInfo: {},
        imgBaseUrl: "https://alanlee-panda-appointment.oss-cn-shenzhen.aliyuncs.com/images/weather-icon/",
        cityName: ''
      }
    },

    //挂载完成时
    mounted() {
      this.getWeatherInfoByCityName(this.city);
    },

    //方法
    methods: {
      getWeatherInfoByCityName(cityName) {

        if (cityName == "全部"){
          cityName = "北京";
        }
        request({
          url: 'http://jisutqybmf.market.alicloudapi.com/weather/query?city=' + cityName,
          method: 'get',
          data: {},
          headers: {
            "Authorization": "APPCODE 22d4a321bdaf4eefbe6709bd7d4e2ed1"
          }
        }).then(res => {
          console.log(res);
          this.weatherInfo = res.data.result;
        }).catch(err => {
          console.log(err)
        })
      }
    },

    //计算属性
    computed: {},

    //监听
    watch: {
      city(val, oldVal){
        console.log(val);
        console.log(oldVal);
        this.getWeatherInfoByCityName(val);
      }
    }
  }
</script>

<style scoped>
  .gradient-bg {
    width: 94%;
    font-family: "Exo", sans-serif;
    color: #fff;
    background: linear-gradient(-45deg, #FFFEFF, #c3cfe2, #8ec5fc, #e7f0fd);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
  }


  @keyframes gradientBG {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
</style>
